<template>
    <div>
        <div class="wrapper">
            <!--<button @click="showBrand" >显示brand</button>-->
            <Popup position="bottom" style="height: 100%" v-model="brandShow">
                <Brand @communicate="showForm($event)" :product="products"/>
            </Popup>
            <Popup position="bottom" style="height: 100vh" v-model="formShow" close-icon="close" :lazy-render="false"
                   @opened="handleOpen"
                   :safe-area-inset-bottom="true" @scroll.native="onScroll">
                <!--                v-if="selectedId==='PLAVIX_STROKE'"-->
                <PLAVIX_IS v-if="selectedId==='PLAVIX_STROKE'" @save="receive($event)" @hide="hideForm"
                           :scheduleId="scheduleId" :tabActive="activeStep"/>
                <NESINA v-if="selectedId==='NESINA'" @save="receive($event)" @hide="hideForm"
                        :scheduleId="scheduleId" :tabActive="activeStep"/>
                <AMARYL v-if="selectedId==='AMARYL'" @save="receive($event)" @hide="hideForm"
                        :scheduleId="scheduleId" :tabActive="activeStep"/>
                <LANTUS v-if="selectedId==='LANTUS'&&bu==='PC'" @save="receive($event)" @hide="hideForm"
                        :scheduleId="scheduleId" :tabActive="activeStep"/>
                <PLAVIX_ACS v-if="selectedId === 'PLAVIX_ACS'" @save="receive($event)" @hide="hideForm"
                            :scheduleId="scheduleId" :tabActive="activeStep"/>
                <APROVEL v-if="selectedId==='APROVE'" @save="receive($event)" @hide="hideForm"
                         :scheduleId="scheduleId" :tabActive="activeStep"/>
                <APROVEL_CO v-if="selectedId==='APROVE_CO'" @save="receive($event)" @hide="hideForm"
                            :scheduleId="scheduleId" :tabActive="activeStep"/>
                <APIDRA v-if="selectedId==='APDINJ' && bu === 'PC'" @save="receive($event)" @hide="hideForm"
                        :scheduleId="scheduleId" :tabActive="activeStep"/>
                <CLEXANE_ACS v-if="selectedId === 'CLEXAN_ACS'" @save="receive($event)" @hide="hideForm"
                             :scheduleId="scheduleId" :tabActive="activeStep"/>
                <CLEXANE_VTE v-if="selectedId === 'CLEXAN_VTE'" @save="receive($event)" @hide="hideForm"
                             :scheduleId="scheduleId" :tabActive="activeStep"/>
                <CLEXANE_HEMODIALYSIS v-if="selectedId === 'CLEXAN_HD'" @save="receive($event)"
                                      @hide="hideForm" :scheduleId="scheduleId" :tabActive="activeStep"/>
                <RENVELA v-if="selectedId === 'RENVEL'" @save="receive($event)" @hide="hideForm"
                         :scheduleId="scheduleId" :tabActive="activeStep"/>
                <LANTUS_DBU v-if="selectedId === 'LANTUS'&&bu==='DBU'" @save="receive($event)" @hide="hideForm"
                            :scheduleId="scheduleId" :tabActive="activeStep"/>
                <APIDRA_DBU v-if="selectedId === 'APDINJ' && bu === 'DBU'" @save="receive($event)" @hide="hideForm"
                            :scheduleId="scheduleId" :tabActive="activeStep"/>
                <RISHIMIN v-if="selectedId === 'LYXUMI'" @save="receive($event)" @hide="hideForm"
                          :scheduleId="scheduleId" :tabActive="activeStep"/>
            </Popup>
            <Popup position="bottom" style="height: 100%" v-model="editFormShow" close-icon="close"
                   :safe-area-inset-bottom="true" @open="handleOpenEdit" @scroll.native="onScrollEdit"
                   :close-on-popstate="false">
                <PLAVIX_IS_EDIT v-if="selectedEditId==='PLAVIX_STROKE'" @save="editReceive($event)" @hide="hideEditForm"
                                :editObject="editObject" :tabActive="activeEditStep"/>
                <NESINA_EDIT v-if="selectedEditId==='NESINA'" @save="editReceive($event)" @hide="hideEditForm"
                             :editObject="editObject" :tabActive="activeEditStep"/>
                <AMARYL_EDIT v-if="selectedEditId==='AMARYL'" @save="editReceive($event)" @hide="hideEditForm"
                             :editObject="editObject" :tabActive="activeEditStep"/>
                <LANTUS_EDIT v-if="selectedEditId==='LANTUS' &&bu==='PC' " @save="editReceive($event)"
                             @hide="hideEditForm"
                             :editObject="editObject" :tabActive="activeEditStep"/>
                <PLAVIX_ACS_EDIT v-if="selectedEditId==='PLAVIX_ACS'" @save="editReceive($event)" @hide="hideEditForm"
                                 :editObject="editObject" :tabActive="activeEditStep"/>
                <APIDRA_EDIT v-if="selectedEditId==='APDINJ' && bu === 'PC'" @save="editReceive($event)"
                             @hide="hideEditForm"
                             :editObject="editObject" :tabActive="activeEditStep"/>

                <APROVEL_EDIT v-if="selectedEditId==='APROVE'" @save="editReceive($event)" @hide="hideEditForm"
                              :editObject="editObject" :tabActive="activeEditStep"/>
                <APROVEL_CO_EDIT v-if="selectedEditId==='APROVE_CO'" @save="editReceive($event)" @hide="hideEditForm"
                                 :editObject="editObject" :tabActive="activeEditStep"/>
                <CLEXANE_ACS_EDIT v-if="selectedEditId==='CLEXAN_ACS'" @save="editReceive($event)" @hide="hideEditForm"
                                  :editObject="editObject" :tabActive="activeEditStep"/>
                <CLEXANE_VTE_EDIT v-if="selectedEditId==='CLEXAN_VTE'" @save="editReceive($event)" @hide="hideEditForm"
                                  :editObject="editObject" :tabActive="activeEditStep"/>
                <CLEXANE_HEMODIALYSIS_EDIT v-if="selectedEditId==='CLEXAN_HD'" @save="editReceive($event)"
                                           @hide="hideEditForm"
                                           :editObject="editObject" :tabActive="activeEditStep"/>
                <RENVELA_EDIT v-if="selectedEditId==='RENVEL'" @save="editReceive($event)" @hide="hideEditForm"
                              :editObject="editObject" :tabActive="activeEditStep"/>
                <LANTUS_DBU_EDIT v-if="selectedEditId==='LANTUS'&& bu=='DBU'" @save="editReceive($event)"
                                 @hide="hideEditForm"
                                 :editObject="editObject" :tabActive="activeEditStep"/>
                <APIDRA_DBU_EDIT v-if="selectedEditId==='APDINJ' && bu === 'DBU'" @save="editReceive($event)"
                                 @hide="hideEditForm"
                                 :editObject="editObject" :tabActive="activeEditStep"/>
                <RISHIMIN_EDIT v-if="selectedEditId==='LYXUMI'" @save="editReceive($event)" @hide="hideEditForm"
                               :editObject="editObject" :tabActive="activeEditStep"/>
            </Popup>
            <Popup position="bottom" style="height: 100vh" v-model="finishFormShow" close-icon="close"
                   :lazy-render="false">
                <APIDRA_DBU_FINISH v-if="selectedFinishId==='APDINJ' && bu === 'DBU'"
                                   @hide="hideFinishForm"
                                   :editObject="finishObject"/>

                <RISHIMIN_DBU_FINISH v-if="selectedFinishId==='LYXUMI' && bu === 'DBU'"
                                     @hide="hideFinishForm"
                                     :editObject="finishObject"/>

                <LANTUS_DBU_FINISH v-if="selectedFinishId==='LANTUS' && bu === 'DBU'"
                                   @hide="hideFinishForm"
                                   :editObject="finishObject"/>
                <PLAVIX_IS_FINISH v-if="selectedFinishId==='PLAVIX_STROKE'"
                                  @hide="hideFinishForm"
                                  :editObject="finishObject"/>
                <NESINA_FINISH v-if="selectedFinishId==='NESINA'"
                               @hide="hideFinishForm"
                               :editObject="finishObject"/>
                <AMARYL_FINISH v-if="selectedFinishId==='AMARYL'"
                               @hide="hideFinishForm"
                               :editObject="finishObject"/>
                <LANTUS_FINISH v-if="selectedFinishId==='LANTUS'&&bu==='PC'"
                               @hide="hideFinishForm"
                               :editObject="finishObject"/>
                <PLAVIX_ACS_FINISH v-if="selectedFinishId==='PLAVIX_ACS'"
                                   @hide="hideFinishForm"
                                   :editObject="finishObject"/>
                <APIDRA_FINISH v-if="selectedFinishId==='APDINJ' && bu === 'PC'"
                               @hide="hideFinishForm"
                               :editObject="finishObject"/>
                <APROVEL_CO_FINISH v-if="selectedFinishId==='APROVE_CO'"
                                   @hide="hideFinishForm"
                                   :editObject="finishObject"/>
                <APROVEL_FINISH v-if="selectedFinishId==='APROVE'"
                                @hide="hideFinishForm"
                                :editObject="finishObject"/>
                <CLEXANE_ACS_FINISH v-if="selectedFinishId==='CLEXAN_ACS'"
                                    @hide="hideFinishForm"
                                    :editObject="finishObject"/>
                <CLEXANE_VTE_FINISH v-if="selectedFinishId==='CLEXAN_VTE'"
                                    @hide="hideFinishForm"
                                    :editObject="finishObject"/>
                <CLEXANE_HEMODIALYSIS_FINISH v-if="selectedFinishId==='CLEXAN_HD'"
                                             @hide="hideFinishForm"
                                             :editObject="finishObject"/>
                <RENVELA_FINISH v-if="selectedFinishId==='RENVEL'"
                                @hide="hideFinishForm"
                                :editObject="finishObject"/>
            </Popup>
            <!--基本信息-->
            <!--标题-->
            <div class="title">
                <div class="title_block"></div>
                <div class="title_text">
                    基本信息
                </div>
            </div>
            <div class="information">
                <span class="leftInformation">主题:</span>
                <span class="rightInformation">{{reportCaseObject.title}}</span>
            </div>
            <div class="information">
                <span class="leftInformation">对象:</span>
                <span class="rightInformation">{{reportCaseObject.hospital}}/{{reportCaseObject.category}}/{{reportCaseObject.contact}}</span>
            </div>
            <div class="information">
                <span class="leftInformation">时间:</span>
                <span class="rightInformation">{{reportCaseObject.day}}</span>
            </div>
            <div class="information">
                <span class="leftInformation">状态:</span>
                <span class="rightInformation">{{reportCaseObject.isExpired=='已过期'?reportCaseObject.isExpired:reportCaseObject.callReportStatus}}</span>
            </div>
            <!--基本信息-->

        </div>
        <div class="grayLine"></div>
        <div class="wrapper">
            <!--拜访信息-->
            <!--标题-->
            <div class="title">
                <div class="title_block"></div>
                <div class="title_text">
                    拜访信息
                </div>
            </div>
            <div class="label">拜访目的</div>
            <div style="border-bottom: 1px solid #ddd; margin-top: 3%;height: 30px;"><span class="label_content">{{reportCaseObject.callSubType}}</span>
            </div>
            <!--<div class="label">产品及优先级</div>-->
            <div class="field_item">
                <div class="field_title" style="margin-left: 5%;">
                    产品及优先级
                </div>
                <div style="border-bottom: 1px solid #ddd;">
                    <Cell is-link :title="form.recommand.join(',')"
                          @click="recommandCheck"/>
                </div>
            </div>
            <!--拜访信息-->
            <Popup v-model="productShow" @scroll.native="onScrollEdit">
                <CheckboxList :fullList="productStrArr" :checked="form.recommand"
                              @confirm="productConfirm" @cancel="productShow = false"/>
            </Popup>
            <div v-if="reportCaseObject.callSubType=='EDA Call'||reportCaseObject.callSubType=='Case Call'">
                <div v-if="(reportCaseObject.callReportStatus =='待反馈'||reportCaseObject.callReportStatus =='已保存')  && reportCaseObject.isExpired !='已过期'">
                    <div class="tips" v-if="caseList.length < 1">* 必须完成案例填写才能提交哦</div>
                    <div class="label" v-if="caseList.length > 0">案例</div>
                    <div class="case" v-for="(item,index) in caseList">
                        <div class="add_case">
                            <span style="margin-left: 5%;">{{item.prodName}}</span>
                            <span v-if="item.finish" style="color: #24A148;">(已完成)</span>
                            <span v-else style="color: #DA1E28;">(未完成)</span>
                        </div>
                        <div class="case_icon">
                            <div style="display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;background: #454592;border-radius: 2px;margin-right: 5px;"
                                 @click="caseEdit(item,index)"><img :src="edit_icon"/></div>
                            <div style="display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;background: #ACB318;border-radius: 2px;"
                                 @click="caseDelete(index)"><img :src="delete_icon"/></div>
                        </div>

                    </div>
                    <div @click="showBrand"
                         style="height: 48px;display: flex;flex-direction: row;background: #454592;border-radius: 2px;margin:10px 0;align-items: center;"
                         v-if="bu == 'PC'">
                        <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.3px;line-height: 16px;padding-left: 10px;flex:1;">
                            {{caseList.length>0?'继续添加案例':'添加案例'}}
                        </div>
                        <div style="margin-right: 10px;padding-top:3px;">
                            <img :src="add_icon"/>
                        </div>
                    </div>
                    <div @click="showBrand"
                         style="height: 48px;display: flex;flex-direction: row;background: #454592;border-radius: 2px;margin:10px 0;align-items: center;"
                         v-if="bu == 'DBU' && caseList.length<1">
                        <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.3px;line-height: 16px;padding-left: 10px;flex:1;">
                            {{'添加案例'}}
                        </div>
                        <div style="margin-right: 10px;padding-top:3px;">
                            <img :src="add_icon"/>
                        </div>
                    </div>
                </div>
                <div v-if="reportCaseObject.isExpired =='已过期'">
                    <div class="label">案例</div>
                    <div class="case" style="border-bottom: 1px solid rgb(221, 221, 221);">
                        <div class="add_case" style="margin-left: 5%;border-bottom: 1px solid rgb(221, 221, 221);">无案例信息
                        </div>
                    </div>
                </div>
                <div v-if="reportCaseObject.callReportStatus =='已提交' && reportCaseObject.isExpired !='已过期'">
                    <div class="label">案例</div>
                    <div class="case" v-for="(item,index) in caseList" @click="caseFinish(item,index)">
                        <div class="add_case" style="border-bottom: 1px solid rgb(221, 221, 221);">
                            <span style="margin-left: 5%;">{{item.prodName}}</span>
                            <span v-if="item.finish" style="color: #24A148;">(已完成)</span>
                            <span v-else style="color: #DA1E28;">(未完成)</span>
                        </div>
                    </div>
                </div>
            </div>


            <div class="title" style="margin-top: 8%;">
                <div class="title_block"></div>
                <div class="title_text">
                    关键信息反馈
                </div>
            </div>
            <div class="field_item">
                <div class="field_title" style="margin-left: 5%;">
                    关键信息
                </div>
                <div style="border-bottom: 1px solid #ddd;">
                    <textarea v-model="form.keyInformation" style="border: none;width: 95%;margin-left: 3%;" rows="3"
                              :disabled="reportCaseObject.isExpired == '已过期' || reportCaseObject.callReportStatus == '已提交'">

                    </textarea>
                    <!--                    <input v-model="form.keyInformation" style="width: 100%;padding: 10px 16px">-->
                </div>
            </div>
            <Popup position="bottom" v-model="keyInformationShow">
                <Picker show-toolbar :columns="keyInformationOptions " @confirm="keyInformationConfirm"
                        @cancel="keyInformationShow=false"/>
            </Popup>

            <div class="field_item">
                <div class="field_title" style="margin-left: 5%;">
                    反馈
                </div>
                <div style="border-bottom: 1px solid #ddd;">
                    <Cell is-link :title="form.feedback?form.feedback:' '" @click="feedbackCheck" class="ss"/>
                </div>
            </div>
            <Overlay :show="feedbackShow">
                <RadioList :fullList="feedbackOptions" :checked="form.feedback"
                           @confirm="feedbackConfirm"
                           @cancel="feedbackShow=false"/>
            </Overlay>

            <div class="title" style="margin-top: 8%;float: left"
                 v-if="callPlanList.length>0||((reportCaseObject.callReportStatus=='待反馈'||reportCaseObject.callReportStatus=='已保存')&&reportCaseObject.isExpired!='已过期')">
                <div class="title_block"></div>
                <div class="title_text">
                    跟进活动
                </div>
            </div>
            <div class="add_activity" @click="showSchedule"
                 v-if="reportCaseObject.callReportStatus !='已提交' && reportCaseObject.isExpired !='已过期'">添加
            </div>

            <div class="field_item_activity" v-for="(item,index) in callPlanList">
                <div class="activity" style="display: flex;">
                    <span style="width: 23%;">拜访主题：</span>
                    <span style="font-family: PingFangSC-Regular;color: #4452B6;letter-spacing: 0.56px">{{item.title}}</span>
                </div>
                <div class="activity" style="display: flex;">
                    <span style="width: 23%;">拜访对象：</span>
                    <span style="font-family: PingFangSC-Regular;color: #4452B6;letter-spacing: 0.56px">{{item.hospital}}/{{item.category}}/{{item.contact}}</span>
                </div>
                <div class="activity" style="display: flex;">
                    <span style="width: 23%;">拜访时间：</span>
                    <span style="font-family: PingFangSC-Regular;color: #4452B6;letter-spacing: 0.56px">{{item.day}}</span>
                </div>
            </div>

            <Popup position="bottom" style="height: 100%" v-model="scheduleShow">
                <Schedule @communicate="showScheduleForm($event)" @hidePopup="hidePopup"
                          :parentCallPlanId="reportCaseObject.id"/>
            </Popup>
            <!--保存按钮-->
            <div class="submit" style="margin-top:50px"
                 v-if=" reportCaseObject.callReportStatus !='已提交' && reportCaseObject.isExpired !='已过期'">
                <div class="save_btn" @click="save_notSubmit">
                    保存
                </div>
            </div>
            <div class="submit" v-if="reportCaseObject.callReportStatus !='已提交' && reportCaseObject.isExpired !='已过期'"
                 style="margin-top: 20px;margin-bottom: 50px;">
                <div class="submit_btn" @click="save">
                    提交
                </div>
            </div>

        </div>
        <div style="margin-top: 35px">
            <img :src="cloud_img" style="width: 100%"/>
        </div>
    </div>


</template>

<script>
    import {Popup, Cell, Overlay, CheckboxGroup, CellGroup, Checkbox, Picker} from 'vant';

    import PLAVIX_IS from './components/PLAVIX_IS/add.vue'
    import PLAVIX_IS_EDIT from './components/PLAVIX_IS/edit.vue'
    import PLAVIX_IS_FINISH from './components/PLAVIX_IS/finish.vue'
    import NESINA from './components/NESINA/add.vue'
    import NESINA_EDIT from './components/NESINA/edit.vue'
    import NESINA_FINISH from './components/NESINA/finish.vue'
    import AMARYL from './components/AMARYL/add.vue'
    import AMARYL_EDIT from './components/AMARYL/edit.vue'
    import AMARYL_FINISH from './components/AMARYL/finish.vue'
    import LANTUS from './components/LANTUS/add.vue'
    import LANTUS_EDIT from './components/LANTUS/edit.vue'
    import LANTUS_FINISH from './components/LANTUS/finish.vue'
    import PLAVIX_ACS from './components/PLAVIX_ACS/add.vue'
    import PLAVIX_ACS_EDIT from './components/PLAVIX_ACS/edit.vue'
    import PLAVIX_ACS_FINISH from './components/PLAVIX_ACS/finish.vue'
    import APROVEL_CO from './components/APROVEL_Co/add.vue'
    import APIDRA from './components/APIDRA/add.vue'
    import APIDRA_EDIT from './components/APIDRA/edit.vue'
    import APIDRA_FINISH from './components/APIDRA/finish.vue'
    import APROVEL_CO_EDIT from './components/APROVEL_Co/edit.vue'
    import APROVEL_CO_FINISH from './components/APROVEL_Co/finish.vue'
    import APROVEL from './components/APROVEL/add.vue'
    import APROVEL_EDIT from './components/APROVEL/edit.vue'
    import APROVEL_FINISH from './components/APROVEL/finish.vue'
    import CLEXANE_ACS from './components/CLEXANE_ACS/add.vue'
    import CLEXANE_ACS_EDIT from './components/CLEXANE_ACS/edit.vue'
    import CLEXANE_ACS_FINISH from './components/CLEXANE_ACS/finish.vue'
    import CLEXANE_VTE from './components/CLEXANE_VTE/add.vue'
    import CLEXANE_VTE_EDIT from './components/CLEXANE_VTE/edit.vue'
    import CLEXANE_VTE_FINISH from './components/CLEXANE_VTE/finish.vue'
    import CLEXANE_HEMODIALYSIS from './components/CLEXANE_HEMODIALYSIS/add.vue'
    import CLEXANE_HEMODIALYSIS_EDIT from './components/CLEXANE_HEMODIALYSIS/edit.vue'
    import CLEXANE_HEMODIALYSIS_FINISH from './components/CLEXANE_HEMODIALYSIS/finish.vue'
    import RENVELA from './components/RENVELA/add.vue'
    import RENVELA_EDIT from './components/RENVELA/edit.vue'
    import RENVELA_FINISH from './components/RENVELA/finish.vue'


    import LANTUS_DBU from './components/LANTUS_DBU/add.vue'
    import LANTUS_DBU_EDIT from './components/LANTUS_DBU/edit.vue'
    import LANTUS_DBU_FINISH from './components/LANTUS_DBU/finish.vue'
    import APIDRA_DBU from './components/APIDRA_DBU/add.vue'
    import APIDRA_DBU_EDIT from './components/APIDRA_DBU/edit.vue'
    import APIDRA_DBU_FINISH from './components/APIDRA_DBU/finish.vue'
    import RISHIMIN from './components/RISHIMIN/add.vue'
    import RISHIMIN_EDIT from './components/RISHIMIN/edit.vue'
    import RISHIMIN_DBU_FINISH from './components/RISHIMIN/finish.vue'
    import edit_icon from '@assets/image/edit.svg'
    import delete_icon from '@assets/image/delete.svg'
    import Brand from './components/brands.vue'
    import Schedule from './components/ACT_ADD/add/index.vue'
    import add_icon from '@assets/icon/add.svg'
    import cloud_img from '@assets/image/cloud.svg'

    import RadioList from "@components/snfRadioList/index";

    const diseaseHistoryOptions = ['糖尿病', '高血压', '胃肠道出血史', '痛风史', '哮喘', '多血管床病变', '其它', '无']
    const keyInformationOptions = ['男', '女']
    const feedbackOptions = ['积极', '中立', '消极']
    import CheckboxList from "@components/snfCheckboxList/index";
    import {scheduleDetailQuery} from '@api/schedule'
    import {getCallCaseByCallPlanId, feedbackSaveOrUpdate, getProduct, getCallPlanList} from '@api/report'

    export default {
        name: "detail",
        components: {
            RadioList,
            CheckboxList,
            Popup,
            Cell,
            Brand,
            Overlay,
            CheckboxGroup,
            CellGroup,
            Checkbox,
            Picker,
            PLAVIX_IS,
            PLAVIX_IS_EDIT,
            NESINA,
            NESINA_EDIT,
            AMARYL,
            AMARYL_EDIT,
            APROVEL_CO,
            APROVEL_CO_EDIT,
            APROVEL,
            LANTUS,
            LANTUS_EDIT,
            PLAVIX_ACS,
            PLAVIX_ACS_EDIT,
            APIDRA,
            APIDRA_EDIT,
            APROVEL_EDIT,
            CLEXANE_ACS,
            CLEXANE_ACS_EDIT,
            CLEXANE_VTE,
            CLEXANE_VTE_EDIT,
            CLEXANE_HEMODIALYSIS,
            CLEXANE_HEMODIALYSIS_EDIT,
            RENVELA,
            RENVELA_EDIT,
            Schedule,
            LANTUS_DBU,
            LANTUS_DBU_EDIT,
            LANTUS_DBU_FINISH,
            APIDRA_DBU,
            APIDRA_DBU_EDIT,
            APIDRA_DBU_FINISH,
            RISHIMIN,
            RISHIMIN_EDIT,
            RISHIMIN_DBU_FINISH,
            PLAVIX_IS_FINISH,
            NESINA_FINISH,
            AMARYL_FINISH,
            LANTUS_FINISH,
            PLAVIX_ACS_FINISH,
            APIDRA_FINISH,
            APROVEL_CO_FINISH,
            APROVEL_FINISH,
            CLEXANE_ACS_FINISH,
            CLEXANE_VTE_FINISH,
            CLEXANE_HEMODIALYSIS_FINISH,
            RENVELA_FINISH
        },
        data() {
            return {
                bu: '',
                activeStep: 0,
                activeEditStep: 0,
                add_icon: add_icon,
                form: {
                    recommand: [],
                    keyInformation: '',
                    feedback: ''
                },
                selectedEditId: 0,
                selectedFinishId: 0,
                editObject: {},
                finishObject: {},
                selectedEditIdx: '',
                selectedFinishIdx: '',
                brandShow: false,
                scheduleShow: false,
                formShow: false,
                keyInformationShow: false,
                feedbackShow: false,
                editFormShow: false,
                selectedId: 0,
                caseList: [],
                scheduleId: this.$route.query.callPlanId,
                diseaseHistoryShow: false,
                diseaseHistoryOptions: diseaseHistoryOptions,
                keyInformationOptions: keyInformationOptions,
                feedbackOptions: feedbackOptions,
                reportCaseObject: {},
                edit_icon: edit_icon,
                delete_icon: delete_icon,
                recommandList: [],
                cloud_img: cloud_img,
                products: [],
                callPlanList: [],
                productShow: false,
                productStrArr: [],
                finishFormShow: false
            }
        },
        methods: {
            feedbackCheck() {
                if (this.reportCaseObject.isExpired == '已过期' || this.reportCaseObject.callReportStatus == '已提交') {
                    this.feedbackShow = false
                } else {
                    this.feedbackShow = true
                }
            },
            recommandCheck() {
                if (this.reportCaseObject.isExpired == '已过期' || this.reportCaseObject.callReportStatus == '已提交') {
                    this.productShow = false
                } else {
                    this.productShow = true
                }

            },
            productConfirm(value, index) {
                this.form.recommand = value
                let idx = []
                for (let i = 0; i < index.length; i++) {
                    idx.push(this.products[index[i]].productId)
                }
                this.productIds = idx
                this.productShow = false
            },
            onScroll(e) {
                let scrollItems = document.querySelectorAll(".privilege-wrap");
                for (let i = scrollItems.length - 1; i >= 0; i--) {
                    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
                    let judge =
                        e.target.scrollTop >=
                        scrollItems[i].offsetTop - scrollItems[0].offsetTop;
                    if (judge) {
                        this.activeStep = i;
                        break;
                    }
                }
            },
            onScrollEdit(e) {
                let scrollItems = document.querySelectorAll(".privilege-wrap-edit");
                for (let i = scrollItems.length - 1; i >= 0; i--) {
                    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
                    let judge =
                        e.target.scrollTop >=
                        scrollItems[i].offsetTop - scrollItems[0].offsetTop;
                    if (judge) {
                        this.activeEditStep = i;
                        break;
                    }
                }
            },
            hideForm() {
                this.formShow = false
            },
            showBrand() {
                this.brandShow = true
            },
            showSchedule() {
                this.scheduleShow = true
            },
            showForm(key) {
                this.selectedId = key
                this.brandShow = false
                this.formShow = true
                //this.$emit('communicate', key)
            },
            showScheduleForm(key) {
                //this.selectedId = key
                this.scheduleShow = false
                //this.formShow = true
                //this.$emit('communicate', key)
            },
            hidePopup() {
                this.scheduleShow = false
                this.callPlanList = []
                getCallPlanList(this.reportCaseObject.id).then((res) => {
                    res.data.forEach(item => {
                        this.callPlanList.push(item)
                    })

                })
            },
            receive(data) {
                this.caseList.push(data)
                for (let i = 0; i < this.caseList.length; i++) {
                    console.log(this.caseList[i])
                }

            },
            toggle(item, index) {
                console.log(index)
                this.$refs.checkboxes[index].toggle();
                this.recommandList[index].selected = !this.recommandList[index].selected
            },
            keyInformationConfirm(value, index) {
                this.form.keyInformation = value
                this.keyInformationShow = false
            },
            feedbackConfirm(value, index) {
                this.form.feedback = value
                this.feedbackShow = false
            },
            caseEdit(cases, index) {
                this.editObject = Object.assign({}, cases)
                this.selectedEditId = cases.prodId
                this.selectedEditIdx = index
                this.editFormShow = true
            },
            caseFinish(cases, index) {
                this.finishObject = Object.assign({}, cases)
                this.selectedFinishId = cases.prodId
                this.selectedFinishIdx = index
                this.finishFormShow = true
            },
            caseDelete(index) {
                this.caseList.splice(index, 1)
            },
            editReceive(data) {
                console.log(data)
                this.caseList[this.selectedEditIdx] = data
                this.selectedEditIdx = ''
                this.selectedEditIdx = ''
            },
            hideFinishForm() {
                let bu = sessionStorage.getItem('bu')
                if (bu == 'DBU') {
                    this.finishFormShow = false
                }
            },
            hideEditForm() {
                this.editFormShow = false
            },
            handleOpen() {
                this.activeStep = 0
            },
            handleOpenEdit() {
                this.activeEditStep = 0
            },
            save_notSubmit() {
                if (!this.form.feedback) {
                    alert('请选择反馈')
                    return
                }
                if (!this.form.keyInformation) {
                    alert('请填写关键信息')
                    return
                }
                if (this.form.recommand.length < 1) {
                    alert('请选择产品及优化级')
                    return
                }
                let cases = this.caseList.map(item => {
                    return {
                        finish: item.finish,
                        callPlanId: item.callPlanId,
                        prodId: item.prodId,
                        prodName: item.prodName,
                        tabBasic: JSON.stringify(item.tabBasic),
                        tabDisease: JSON.stringify(item.tabDisease),
                        tabComplication: JSON.stringify(item.tabComplication),
                        treatment: JSON.stringify(item.treatment)
                    }
                })
                let param = {
                    callPlanId: this.$route.query.callPlanId,
                    callReportStatus: '已保存',
                    callStatus: '',
                    prodId: this.productIds.join(','),
                    prodName: this.form.recommand.join(','),
                    kegMsg: this.form.keyInformation,
                    feedback: this.form.feedback,
                    callCaseList: cases
                }
                feedbackSaveOrUpdate(param).then(res => {
                    if (res.statusCode == 200) {
                        this.$router.push('/feedback/list')
                    } else {
                        alert(res.message)
                    }
                })
            },
            save() {
                if (!this.form.feedback) {
                    alert('请选择反馈')
                    return
                }
                if (!this.form.keyInformation) {
                    alert('请填写关键信息')
                    return
                }
                if (this.form.recommand.length < 1) {
                    alert('请选择产品及优化级')
                    return
                }
                let cases = []
                if (this.reportCaseObject.callSubType == 'EDA Call' || this.reportCaseObject.callSubType == 'Case Call') {
                    if (this.caseList.length < 1) {
                        alert('请添加案例信息后保存')
                        return
                    }
                    let flag = false
                    for (let i = 0; i < this.caseList.length; i++) {
                        if (this.caseList[i].finish) {
                            flag = true
                        }
                    }
                    if (!flag) {
                        alert('请至少添加一个完善案例')
                        return
                    }
                    cases = this.caseList.map(item => {
                        return {
                            finish: item.finish,
                            callPlanId: item.callPlanId,
                            prodId: item.prodId,
                            prodName: item.prodName,
                            tabBasic: JSON.stringify(item.tabBasic),
                            tabDisease: JSON.stringify(item.tabDisease),
                            tabComplication: JSON.stringify(item.tabComplication),
                            treatment: JSON.stringify(item.treatment)
                        }
                    })
                }

                let param = {
                    callPlanId: this.$route.query.callPlanId,
                    callReportStatus: '已提交',
                    callStatus: '已完成',
                    prodId: this.productIds.join(','),
                    prodName: this.form.recommand.join(','),
                    kegMsg: this.form.keyInformation,
                    feedback: this.form.feedback,
                    callCaseList: cases
                }
                feedbackSaveOrUpdate(param).then(res => {
                    if (res.statusCode == 200) {
                        this.$router.push('/feedback/list')
                    } else {
                        alert(res.message)
                    }
                })
            }
        },
        created() {

        },
        mounted() {
            this.bu = sessionStorage.getItem('bu')
            document.querySelector('body').setAttribute('style', 'background-color:#fff')
            let callPlanId = this.$route.query.callPlanId
            //请求callplan数据
            scheduleDetailQuery(callPlanId).then((res) => {
                    if (res.statusCode == 200) {
                        this.reportCaseObject = res.data
                        this.form.feedback = this.reportCaseObject.feedback
                        this.form.keyInformation = this.reportCaseObject.kegMsg
                        this.form.recommand = this.reportCaseObject.prodName ? this.reportCaseObject.prodName.split(',') : []
                        this.productIds = this.reportCaseObject.prodId ? this.reportCaseObject.prodId.split(',') : []
                    } else {
                        alert(res.message)
                    }

                }
            )
            //请求caseList数据
            getCallCaseByCallPlanId(callPlanId).then(res => {
                if (res.statusCode == 200) {
                    let cases = res.data.map(item => {
                        return {
                            finish: item.finish,
                            callPlanId: item.callPlanId,
                            prodId: item.prodId,
                            prodName: item.prodName,
                            tabBasic: JSON.parse(item.tabBasic),
                            tabDisease: JSON.parse(item.tabDisease),
                            tabComplication: JSON.parse(item.tabComplication),
                            treatment: JSON.parse(item.treatment)
                        }
                    })
                    this.caseList = cases
                } else {
                    alert(res.message)
                }
            })
            getProduct().then(res => {
                if (res.statusCode == 200) {
                    this.products = res.data
                    this.productStrArr = res.data.map(item => {
                        return item.productName
                    })
                } else {
                    alert('获取优先产品失败')
                }
            })
            getCallPlanList(callPlanId).then((res) => {
                res.data.forEach(item => {
                    this.callPlanList.push(item)
                })

            })

        },
        computed: {
            subAddWath() {
                if (this.reportCaseObject.callReportStatus == '已提交' || this.reportCaseObject.callReportStatus == '已过期') {
                    if (this.callPlanList.length < 1) {
                        return false
                    }
                } else {
                    return true
                }
            }
        },
        beforeRouteLeave(to, from, next) {
            if (this.editFormShow) {
                this.editFormShow = false
                next(false)
            } else if (this.finishFormShow) {
                this.finishFormShow = false
                next(false)
            }
            if (this.scheduleShow) {
                this.scheduleShow = false
                next(false)
            } else {
                next()
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        padding-top: 3%;
        padding-left: 5.3%;
        padding-right: 5.3%;
    }

    .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .title_block {
        background: #ACB318;
        width: 4px;
        height: 20px;
    }

    .title_text {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 24px;
        margin-left: 12px;
    }

    .add_activity {
        float: right;
        margin-top: 8%;
        font-size: 13px;
        align-items: flex-end;
        display: flex;
        color: #BABC18;
    }

    .information {
        display: flex;
        margin-left: 4.6%;
        margin-top: 3%;
    }

    .leftInformation {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.22px;
        text-align: justify;
        line-height: 20px;
        width: 10%;
    }

    .rightInformation {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #666666;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 20px;
        padding-left: 2%;
        width: 85%;
    }

    .grayLine {
        width: 100%;
        height: 10px;
        background: #dddddd;
        margin-top: 5%;
    }

    .label {
        margin-top: 5%;
        margin-left: 5%;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.22px;
        text-align: justify;
        line-height: 16px;
    }

    .label_content {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 22px;
        height: 30px;
        margin-left: 5%;
        margin-top: 3%;
    }

    .field_item {
        margin-top: 4%;
    }

    .field_title {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.22px;
        text-align: justify;
        line-height: 16px;
    }

    .case {
        width: 100%;
        height: 36px;
        margin-top: 5%;
        display: flex;
        flex-direction: row;
    }

    .add_case {
        flex: 1;
        border-radius: 2px;
        border-radius: 2px;
        height: 36px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 22px;
        float: left;
        border-bottom: 1px solid #cccccc;
    }

    .addCase {
        background: #454592;
        border-radius: 2px;
        border-radius: 2px;
        height: 36px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0.3px;
        text-align: center;
        line-height: 36px;
        margin-top: 5%;

    }

    .ss {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 22px;
    }

    .case_icon {
        display: flex;
        flex-direction: row;
    }

    .submit {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: center;
        float: left;
    }

    .activity {
        margin-left: 12px;
        font-family: PingFangSC-Regular;
        color: #999999;
        letter-spacing: 0.48px;
        font-size: 13px;
        margin-top: 22px;
    }

    .submit_btn {
        width: 100%;
        height: 48px;
        background: #454592;
        border-radius: 2px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;

    }

    .save_btn {
        width: 100%;
        height: 48px;
        background: #ACB318;
        border-radius: 2px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
    }

    .tips {
        font-family: PingFangSC-Regular;
        font-size: 10px;
        color: #E70000;
        letter-spacing: 0.19px;
        text-align: justify;
        line-height: 14px;
        margin-top: 25px;
    }

    .field_item_activity {
        width: 100%;
        height: 143px;
        border: 0.5px;
        border-radius: 5px;
        /*        margin-top: 16px;
                margin-right: 22px;*/
        background-color: rgb(243, 243, 243);
        float: left;
        margin-bottom: 15px;
    }

    .van-cell {
        background-color: #fff;
    }
</style>